import { default_tile_8x8 } from "./utils/const";
import mono_hlsb, { drawCanvasDataInWorker, parseDataFromCanvasInWorker } from "./utils/mono_hmsb_in_worker";
import { openLocalFile } from "./utils/file";

window["test"] = async () => {
  /** @type {HTMLCanvasElement} */
  let cv = document.createElement("canvas");
  let imgData = cv.getContext("2d").createImageData(512, 512);
  imgData.data.set(await drawCanvasDataInWorker(default_tile_8x8, imgData.width, imgData.height, 4, [0,0,0]));
  let backData = await parseDataFromCanvasInWorker(imgData.data, imgData.width, imgData.height, 4, [0,0,0]);
  console.log("def", default_tile_8x8, "back", backData);
}


const click = async (event) => {
  /** @type {HTMLCanvasElement} */
  let canvas = event.target;
  var ctx = canvas.getContext('2d');
  // load image
  let file = await openLocalFile("image/*");
  let bmp = await createImageBitmap(file);
  canvas.width = bmp.width;
  canvas.height = bmp.height;
  ctx.drawImage(bmp,0,0,canvas.width,canvas.height);

  let data = ctx.getImageData(0,0,canvas.width,canvas.height);
  let btc = await mono_hlsb.convertToBlackWhiteFloydSteinbergInWorker(data.data, data.width);
  data.data.set(btc);
  ctx.putImageData(data, 0, 0);

  // let data = ctx.getImageData(0,0,canvas.width/4,canvas.height);
  // let btc = await mono_hlsb.convertToBlackWhiteInWorker(data.data, 127);
  // data.data.set(btc);
  // ctx.putImageData(data, 0, 0);

  // data = ctx.getImageData(canvas.width/4*1,0,canvas.width/4,canvas.height);
  // btc = await mono_hlsb.convertToBlackWhiteDitherInWorker(data.data, data.width);
  // data.data.set(btc);
  // ctx.putImageData(data, canvas.width/4*1, 0);
  
  // data = ctx.getImageData(canvas.width/4*2,0,canvas.width/4,canvas.height);
  // btc = await mono_hlsb.convertToBlackWhiteFloydSteinbergInWorker(data.data, data.width);
  // data.data.set(btc);
  // ctx.putImageData(data, canvas.width/4*2, 0);

  // data = ctx.getImageData(canvas.width/4*3,0,canvas.width/4,canvas.height);
  // btc = await mono_hlsb.convertToGrayScaleInWorker(data.data);
  // data.data.set(btc);
  // ctx.putImageData(data, canvas.width/4*3, 0);
}

window.onload = async () => {
  /** @type {HTMLCanvasElement} */
  var canvas = document.getElementById('myCanvas');
  canvas.onclick = click;
  canvas.width = 1280;
  canvas.height = 720;
  // canvas.width = 128;
  // canvas.height = 64;
  var ctx = canvas.getContext('2d');
  ctx.fillStyle='#FFFFFF';
  ctx.fillRect(0,0,320,320);

  ctx.fillStyle='#00A0FF';
  ctx.fillRect(0,0,32,32);
  ctx.fillStyle='#A633D5';
  ctx.fillRect(32,0,32,32);
  ctx.fillStyle='#A633D5';
  ctx.fillRect(0,32,32,32);

  ctx.fillStyle='#0000A0';
  ctx.fillRect(288,0,32,32);
  ctx.fillStyle='#0000A0';
  ctx.fillRect(0,288,32,32);
  ctx.fillStyle='#00FFA0';
  ctx.fillRect(288,288,32,32);
  ctx.font = "16px monospace";
  ctx.fillStyle = '#00A0FF';
  ctx.textAlign = "start";
  ctx.textBaseline = "top";
  ctx.strokeText("汉", 0, 0);;
  // black white filter
  let data = ctx.getImageData(0,0,canvas.width,canvas.height);
  console.time("convert to nomo");
  // let btc = await mono_hlsb.convertToBlackWhite(data.data, 64);
  let btc = await mono_hlsb.convertToBlackWhiteDitherInWorker(data.data, data.width);
  console.timeEnd("convert to nomo");
  data.data.set(btc);
  ctx.putImageData(data, 0, 0);
}
